<template>
	<div class="table-index">
		<el-table ref="table" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"
		 :header-cell-style="GLOBAL.headerStyle">
		 <el-table-column
		       type="selection"
		       width="55"  align="center">
		     </el-table-column>
			<el-table-column type="index" label="序号" align="center"></el-table-column>
			<el-table-column :label="tableLabel.one" align="center" prop="name">
			</el-table-column>
			<el-table-column :label="tableLabel.two" align="center">
				<template slot-scope="scope">{{ scope.row.date }}</template>
			</el-table-column>
			<el-table-column prop="name" :label="tableLabel.three" align="center">
			</el-table-column>
			<el-table-column prop="name" :label="tableLabel.four" align="center">
			</el-table-column>
			<el-table-column prop="name" :label="tableLabel.five" align="center">
			</el-table-column>
			<el-table-column prop="name" :label="tableLabel.six" align="center" v-if="tableLabel.seven">
			</el-table-column>
			<el-table-column prop="name" :label="tableLabel.seven" align="center" v-if="tableLabel.seven">
			</el-table-column>
			<el-table-column  :label="tableLabel.eight" align="center">
				<template slot-scope="scope">
					<!-- <el-tag type="success">正常</el-tag> -->
					<el-tag type="danger" v-show="tableType != 'select'">禁止</el-tag>
					<el-tag type="primary" v-show="tableType == 'select'">未开始</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="300" align="center">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" @click.stop="viewEvent">{{tableLabel.optionsBlue}}</el-button>
					<el-button size="mini" type="success" @click.stop="EditEvent">{{tableLabel.optionsGreen}}</el-button>
					<el-button size="mini" type="danger" v-show="tableType != 'select'">{{tableLabel.optionsRed}}</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default{
		props:['tableData','tableLabel','tableType'],
		data(){
			return{
				multipleSelection:[]
			}
		},
		methods:{
			handleSelectionChange(val) {
				this.multipleSelection = val;
				console.log(val)
			},
			viewEvent(){
				this.$emit('viewEvent',{type:'view',id:''})
			},
			EditEvent(){
				this.$emit('editEvent',{type:'edit',id:''})
			}
		}
	}
</script>

<style lang="scss">
	@include component(table-index) {
		margin-top: rem(21);
	}
</style>
